<template>

    <div class="homeOut">
        <div class="header">
            <el-card shadow="never" class="box-card">
                <div class="head_Con">
                    <div class="user_avatar">
                        <el-image style="width: 120px; height: 120px; border-radius: 50%;"
                            :src="useUserStore().avatar || defAva" fit="cover" />
                    </div>
                    <div>
                        <h3>你好{{ useUserStore().userName }},欢迎使用cgclass后台管理系统</h3>
                        <p>
                            数字视觉云课堂/CGclass实训教学平台，该平台是专为数字媒体专业提供实训教学过程管理而设计的平台。快速构建课堂活动、布置作品作业、学生作品批阅、统计分析可视化等功能，平台私有化部署保障教学资源的安全性，为师生提供智能、便捷、高效的教学实训环境，助力智慧高校数字化转型。
                        </p>
                    </div>
                </div>
            </el-card>
        </div>

        <div class='admin'>
            <el-row>
                <el-col :span="24">
                    <div class='left'>
                        <!-- 头部数据 -->
                        <div v-if="headArr.length > 0" class='census'>
                            <div class='item'>
                                <div class='pic'>
                                    <i class="iconfont icon-Customermanagement-fill"></i>
                                </div>
                                <div class='text'>
                                    <div class='small'>已注册用户</div>
                                    <div class='big'>
                                        <b>{{ getCountByT(headArr, "u") }}</b>人
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='pic'>
                                    <i class="iconfont icon-certified-supplier-fill"></i>
                                </div>
                                <div class='text'>
                                    <div class='small'>已培训人数</div>
                                    <div class='big'>
                                        <b>{{ getCountByT(headArr, "c") }}</b>人
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='pic'>
                                    <i class="iconfont icon-folder-fill"></i>
                                </div>
                                <div class='text'>
                                    <div class='small'>已创建班课</div>
                                    <div class='big'>
                                        <b>{{ getCountByT(headArr, "b") }}</b>门
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='pic'>
                                    <i class="iconfont icon-contacts-fill"></i>
                                </div>
                                <div class='text'>
                                    <div class='small'>已建立班级</div>
                                    <div class='big'>
                                        <b>{{ getCountByT(headArr, "cla") }}</b>个
                                    </div>
                                </div>
                            </div>
                            <div class='item'>
                                <div class='pic'>
                                    <i class="iconfont icon-order-fill"></i>
                                </div>
                                <div class='text'>
                                    <div class='small'>累计批阅作业量</div>
                                    <div class='big'>
                                        <b>{{ getCountByT(headArr, "re") }}</b>份
                                    </div>
                                </div>
                            </div>


                        </div>
                    </div>
                </el-col>
            </el-row>

            <div class="echarts">
                <el-row>
                    <el-col :span="8">
                        <div ref="accessEchart" class="box">
                            
                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div ref="regEchart" class="box">

                        </div>
                    </el-col>
                    <el-col :span="8">
                        <div ref="majorEchart" class="box">

                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>


        <div class="footer">
            <el-row>
                <el-col :span="12">
                    <el-card shadow="never" class="banList" style="height: 100%; margin-right: 20px">
                        <template #header>
                            <div class="card-header">
                                <span>优秀班课排名</span>
                            </div>
                        </template>
                        <div  v-if="classArr.length" class="leftCon">
                            <div @click="goSyllabus(item)" v-for="(item, index) in classArr" :key="item.id"
                                class="item">
                                <div class="num">0{{ index + 1 }}</div>
                                <el-image class="pic" style="width: 60px; height: 40px" :src='item.url' fit="cover" />
                                <div class="text">
                                    <p>{{ item.name
                                        }}</p>
                                    <span>{{ item.nick_name }}老师</span>
                                </div>
                            </div>
                        </div>

                        <div v-else>
                            <el-empty description='暂无优秀班课'/>
                            
                        </div>

                    </el-card>
                </el-col>

                <el-col :span="12" class="right">
                    <div ref="upEchart" class="box">

                    </div>
                </el-col>

            </el-row>

        </div>
    </div>


   
</template>

<script setup>

import { ref, getCurrentInstance } from 'vue';
// import { echarts } from './charts';
import * as echarts from 'echarts'
import { useUserStore } from "@/store/modules/user"
import { counterStore } from "@/store/modules/counter"
import { headerList, centerList, rightList } from "@/api/admin/index"
import { SwitchUnits, parseTime } from '@/utils/common';
import { excellent_bk} from '@/api/banke/class';
import defAva from '@/assets/images/user-default.jpg';
const store = counterStore()
// 班课列表
const classArr = ref([])
const headArr = ref([])
const aceData = ref([])
const aceSeries = ref([])
const { proxy } = getCurrentInstance();
const router = useRouter()
//生成图表
const generateChart = (idname, option) => {
    let myChart = echarts.init(idname);
    let myoption = option
    myoption && myChart.setOption(myoption);
    window.addEventListener('resize', function () {
        myChart.resize();
    });
};


// 日访问量图标配置项
const accessOption = {

    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: aceData.value
    },
    yAxis: {
        type: 'value'
    },
    title: {
        left: 'center',
        text: '日访问量'
    },
    series: [
        {
            data: aceSeries.value,
            type: 'line',
            areaStyle: {}
        }
    ]
};

//日注册量配置项
const regOption = {

    xAxis: {
        type: 'category',
        data: []
    },
    yAxis: {
        type: 'value'
    },
    title: {
        left: 'center',
        text: '日注册量'
    },
    series: [
        {
            type: 'bar',
            itemStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: '#83bff6' },
                    { offset: 0.5, color: '#188df0' },
                    { offset: 1, color: '#188df0' }
                ])
            },
            emphasis: {
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#2378f7' },
                        { offset: 0.7, color: '#2378f7' },
                        { offset: 1, color: '#83bff6' }
                    ])
                }
            },
            data: []
        }
    ]
}

// 专业方向分布配置项
const majorOption = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        bottom: '0%',
        left: 'center'
    },

    title: {
        left: 'center',
        text: '专业方向分布'
    },
    series: [
        {
            name: '',
            type: 'pie',
            radius: ['30%', '60%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: 18,
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [

            ]
        }
    ]
};


// 上传统计配置项
const upOption = {
    title: {
        text: '上传统计量',
        left: 'center'
    },
    tooltip: {
        trigger: 'axis',

        formatter: function (params) {
            // 示例格式化函数，你可以根据实际情况调整格式
            return params.value;
        },
        axisPointer: {
            type: 'none'
        }
    },
    legend: {},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01],
        axisLabel: {
            formatter: function (value) {
                // 判断数值大小并转换单位
                if (value >= 1) {
                    return value.toFixed(1) + 'G';
                } else {
                    return (value * 1000).toFixed(0) + 'M';
                }
            }
        }
    },
    yAxis: {
        type: 'category',
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
    },
    series: [
        {
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230]
        }
    ]
}

// 获取头部数据
const getHeaderList = () => {
    headerList().then(res => {
        console.log(res);
        headArr.value = res
    })
}


function getCountByT(arr, tValue) {
    const item = arr.find(item => item.t === tValue);
    return item.count
}


// 获取中间echart数据
const getCenterList = () => {
    centerList().then(res => {

        console.log(res);


        Object.entries(res.info).forEach(([key, value]) => {
            const formattedDate = key.split('.')[1] + '-' + key.split('.')[2];
            aceData.value.push(formattedDate);
            aceSeries.value.push(value);
        });


        regOption.xAxis.data = res.visits.map(item => item.registration_date.split('-')[1] + '-' + item.registration_date.split('-')[2]);
        // 创建注册数量数组
        regOption.series[0].data = res.visits.map(item => item.daily_registrations);

        majorOption.series[0].data = res.right.slice(0, 10).map(item => {
            return {
                ...item, // 这里使用展开运算符复制了原始对象的所有属性
                value: item.count, // 然后添加或重命名count为value
            };
        });
        generateChart(proxy.$refs.accessEchart, accessOption)
        generateChart(proxy.$refs.regEchart, regOption)
        generateChart(proxy.$refs.majorEchart, majorOption)

    })
}



// 获取右侧数据

const getRightList = () => {
    rightList().then(res => {
        console.log(res);
        if (res.length < 3 && res.length > 0) {
            let currentDate = new Date(res[0].create_time); // 当前时间
            let temArr = [];
            // 循环生成前4天的时间戳
            for (let i = res.length; i < 4; i++) {
                let prevDate = new Date(currentDate.getTime() + i * 24 * 60 * 60 * 1000); // 前i天的时间
                // 将时间戳转换为整数（这里假设你需要的是时间戳的整数形式，未明确具体时间格式）
                let createTime = Math.floor(prevDate.getTime() / 1000); // 时间戳转为秒级
                temArr.push({ create_time: createTime, length: 0 });
            }
            res = res.concat(temArr)
        }

        if (res.length == 0) {
            let currentDate = new Date(); // 当前时间
            let temArr = [];
            // 循环生成前4天的时间戳
            for (let i = res.length; i < 5; i++) {
                let prevDate = new Date(currentDate.getTime() + i * 24 * 60 * 60 * 1000); // 前i天的时间
                // 将时间戳转换为整数（这里假设你需要的是时间戳的整数形式，未明确具体时间格式）
                let createTime = Math.floor(prevDate.getTime() / 1000); // 时间戳转为秒级
                temArr.push({ create_time: createTime, length: 0 });
            }
            res = res.concat(temArr)
        }



        upOption.yAxis.data = res.map(item => parseTime(item.create_time, '{m}-{d}'));
        // 上传统计数量数组
        upOption.series[0].data = res.map(item => (item.length / 1073741824));

        generateChart(proxy.$refs.upEchart, upOption)

    })

}


// 获取优秀班课列表数据
const getClassList = (options) => {
    excellent_bk().then(res => {
        console.log(res);
        if (res) {
            classArr.value = res
        } else {
            classArr.value = []
        }

    })
}
const goSyllabus = (item) => {
    store.bkItem = item
    store.bkItem.cover_url=item.url 
    router.push({ path: '/designclass', query: { activeNum: 1 } })
};

// 页面加载执行柱状图的处理函数
onMounted(() => {
    getHeaderList()
    getCenterList()
    getRightList()
    getClassList()

})




</script>

<style lang='scss' scoped>
@use '@/assets/styles/vars.module' as *;
@use "@/assets/styles/custom" as *;

.homeOut{
    overflow-x: auto;
}
.header {
    min-width: 1200px;
    margin: 20px 0;


    h3 {
        margin: 30px 0 15px 0;
    }

    p {
        color: #999;
        font-size: 14px;

    }

    .head_Con {
        display: flex;
        justify-content: space-between;

        .user_avatar {
            width: 120px;
            margin-right: 15px;
        }
    }
}

.admin {

    min-width: 1200px;

    .left {
        // width: 70%;

        height: 100%;
        border-right: 20px solid #fff;
        box-sizing: border-box;

        .census {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .item {
                display: flex;
                align-items: center;
                width: calc(20% - 20px);
                background: #f2f6fa;
                padding-left: 10px;
                border-bottom-right-radius: 40px;
                border: 1px solid transparent;
                transition: 0.3s;
                padding: 10px;
                cursor: pointer;

                .pic {
                    padding-right: 10px;

                    i {
                        font-size: 50px;
                        color: #4E88F3;
                    }
                }

                .text {
                    .small {
                        font-size: 13px;
                        line-height: 1.7em;
                        color: #9499a0;
                    }

                    .big {
                        font-size: 15px;
                        color: #4395ff;

                        b {
                            font-size: 25px;
                        }
                    }
                }
            }

            .item:hover {
                border-color: #82b5f6;
                box-shadow: 0 10px 20px rgba(67, 149, 255, 0.2);
            }
        }

        .rencent-class {
            padding: 30px 20px;

            .module-title {
                font-size: 24px;
                color: #2f2f2f;
                width: 100%;
                display: flex;
                justify-content: space-between;

                .more {
                    cursor: pointer;
                    color: #a6a6a6;
                    font-size: 16px;

                    b {
                        font-family: '宋体';
                    }
                }
            }

            .class-list {
                .item {
                    display: flex;
                    width: 100%;
                    justify-content: space-between;
                    padding: 30px 0 40px;
                    border-bottom: 4px solid #f5f7fa;
                }

                .item:last-child {
                    border-bottom: 0;
                    margin-top: 20px;
                }

                .class-info {
                    width: 45%;
                    padding-right: 10px;

                    .info-top {
                        display: flex;
                        padding: 5px;
                        border-radius: 3px;
                        transition: 0.3s;

                        .pic {
                            width: 220px;
                            height: 124px;
                            border-radius: 5px;
                            overflow: hidden;

                            img {
                                width: 100%;
                                height: 100%;
                                object-fit: cover;
                            }
                        }

                        .text {
                            position: relative;
                            width: calc(100% - 220px);
                            padding-left: 18px;

                            .arch-name {
                                margin-bottom: 1px;
                                color: #888;
                                font-size: 16px;

                                >i {
                                    margin-right: 4px;
                                }
                            }

                            .title {
                                font-size: 16px;
                                color: #333;
                                font-weight: 500;
                                overflow: hidden;
                                white-space: nowrap;
                                text-overflow: ellipsis;
                            }

                            .class-name {
                                width: max-content;
                                font-size: 12px;
                                color: #4395ff;
                                height: 20px;
                                padding: 0 8px;
                                text-align: center;
                                background: #e7f1ff;
                                line-height: 20px;
                                border-radius: 3px;
                                margin-top: 6px;
                            }

                            .time-techer {
                                width: calc(100% - 22px);
                                position: absolute;
                                bottom: 0;
                                font-size: 14px;
                                color: #aaaaaa;
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            }
                        }

                        &:hover {
                            background: #efefef;
                        }
                    }

                    .info-bottom {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 30px;
                    }

                    .info-item {
                        width: 20%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        text-align: center;

                        .icon {
                            .coloricon {
                                width: 1em;
                                height: 1em;
                                font-size: 22px;
                            }
                        }

                        .text {
                            .small {
                                font-size: 14px;
                                color: #acacac;
                                margin: 10px 0 6px;
                            }

                            .big {
                                font-size: 12px;
                                color: #4395ff;

                                b {
                                    font-size: 24px;
                                }
                            }
                        }
                    }
                }

                .works-info {
                    width: 55%;

                }
            }
        }
    }

    .right {

        .classTit {
            h3 {
                line-height: 1.7em;
            }
        }

        .classItem {
            margin: 10px 0 30px 0;
            display: flex;
            align-items: center;

            .sort {
                color: #666;
            }

            .img {
                margin: 0 15px;
            }

            .txt {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                height: 40px;

                p {
                    font-size: 14px;
                    line-height: 1em;
                }

                span {
                    display: block;
                    color: #999;
                    font-size: 12px;
                }

            }

        }

        .infoTit {
            display: flex;
            justify-content: space-between;
        }



    }
}

.echarts {
    margin-top: 40px;

    .box {
        border: 1px solid #eee;
        padding-top: 20px;
        height: 300px;
        margin-right: 20px;
    }
}


.footer {
    min-width: 1200px;
    margin-top: 50px;

    .leftCon {
        display: flex;
        flex-wrap: wrap;


        .item {
            display: flex;
            width: 50%;
            align-items: center;
            padding: 10px 0;
            cursor: pointer;

            .pic {
                margin: 0 15px;
            }

            .text {
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                height: 100%;

                p {
                    font-size: 14px;

                }

                span {
                    font-size: 12px;
                    color: #999;
                }
            }

        }

    }


    .right {
        padding-right: 15px;

        .infoTit {
            display: flex;
            justify-content: space-between;
        }


        .box {
            border: 1px solid #eee;
            height: 250px;
            padding-top: 20px;

        }
    }


}
</style>